<template>
  <div class="sanstyle">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle" style="padding-right: .35rem;">
          <div class="twz">
            <span class="dwz">采集数据</span>
            <br />
            <span class="xwz">Collect data</span>
          </div>
          <el-date-picker style="width: 1.8rem;" v-model="value2" align="right" @change="qhshij" type="date"
            placeholder="选择日期" :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <!--标题 E-->

        <!--三栏布局B-->
        <div class="stjqy">
          <div class="bdbk" style="height: 20%">
            <div class="xsl">
              <div>
                <span style="color: white; font-size: 0.16rem">参与工作人数</span>
                <div>
                  <span style="color: #2efff2; font-size: 0.24rem">{{
                      personNum
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">人</span>
                </div>
              </div>
              <div>
                <span style="color: white; font-size: 0.16rem">巡护次数</span>
                <div>
                  <span style="color: #917fff; font-size: 0.24rem">{{
                      patrolNum
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">次</span>
                </div>
              </div>
            </div>
            <div class="xsl">
              <div>
                <span style="color: white; font-size: 0.16rem">数据采集</span>
                <div>
                  <span style="color: #fff27f; font-size: 0.24rem">{{
                      dataNum
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">条</span>
                </div>
              </div>
              <div>
                <span style="color: white; font-size: 0.16rem">巡护距离</span>
                <div>
                  <span style="color: #34ceff; font-size: 0.24rem">{{
                      distance
                  }}</span>
                  <span style="font-size: 0.18rem; color: white">km</span>
                </div>
              </div>
            </div>
          </div>
          <div class="bdbk" style="height: 40%; position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0">发现植物最多Top10</span>
              <br />
              <span class="xwz" style="line-height: 0">Top10 plants were found</span>
            </div>

            <div style="
                position: absolute;
                left: -0.4rem;
                height: calc(100% - 0.5rem);
                width: calc(100% + 0.4rem);
              " id="bar1"></div>
          </div>
          <div style="height: 40%; position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0">发现动物最多Top5</span>
              <br />
              <span class="xwz" style="line-height: 0">Top5 most animals found</span>
            </div>

            <div style="
                position: absolute;
                left: -0.4rem;
                height: calc(100% - 0.6rem);
                width: calc(100% + 0.4rem);
                overflow: hidden;
              " id="bar2"></div>
          </div>
        </div>
        <!--三栏布局E-->
      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative">
      <div class="bzxq">
        <div v-for="(item, index) in tclist" :key="index">
          <div><img :src="item.ico" alt="" /></div>
          <div>
            <span :style="{ color: item.color }">{{ item.num }}</span>
            <br />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>

      <!--分布类型 B-->
      <div class="fblx" style="cursor: pointer">
        <!--<div><span>金雕</span></div>-->
        <div v-for="(item, index) in fbList" :key="index" @click="qhfb(item)"
          :style="item.sts ? 'opacity: 1;' : 'opacity: .6'">
          <img :src="item.ico" alt="" /><span>{{ item.name }}</span>
        </div>
      </div>
      <!--分布类型 E-->

      <!--tab切换 B-->
      <div class="qhtab" style="top: 1.6rem; left: 0.34rem">
        <div v-for="(item, index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="
            item.sts ? '/static/images/tab1.png' : '/static/images/tab2.png'
          " alt="" />
          <span style="margin-left: 0.08rem">{{ item.name }}</span>
        </div>
      </div>
      <!--tab切换 E-->

      <!--中间地图 B-->
      <div id="map" style="height: 75%; width: 100%; margin-top: 15%"></div>
      <!--中间地图 E-->
    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">采集数据</span>
            <br />
            <span class="xwz">Collect data</span>
          </div>
        </div>
        <!--标题 E-->
        <div class="stjqy">
          <div class="bdbk rzs" style="display: flex; height: 20%">
            <!--调查次数B-->
            <div>
              <div>
                <span style="color: white; font-size: 0.16rem">照片张数</span>
              </div>
              <div>
                <span style="
                    color: #2efff2;
                    font-size: 0.24rem;
                    line-height: 0.25rem;
                  ">{{ photoNum }}</span><span style="color: white; font-size: 0.16rem">次</span>
              </div>
              <div>
                <img style="height: 0.6rem" src="/static/images/shipin.png" alt="" />
              </div>
            </div>
            <div>
              <div>
                <span style="color: white; font-size: 0.16rem">视频数量</span>
              </div>
              <div>
                <span style="
                    color: #34ceff;
                    font-size: 0.24rem;
                    line-height: 0.25rem;
                  ">{{ videoNum }}</span><span style="color: white; font-size: 0.16rem">次</span>
              </div>
              <div>
                <img style="height: 0.6rem" src="/static/images/zhaopian.png" alt="" />
              </div>
            </div>
          </div>
          <!--调查次数E-->
          <div class="bdbk" style="height: 40%; position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0">发现物种</span>
              <br />
              <span class="xwz" style="line-height: 0">Discovered species</span>
            </div>
            <div style="
                position: absolute;
                left: -0.4rem;
                height: calc(100% - 0.6rem);
                width: calc(100% + 0.4rem);
              ">
              <div style="
                  width: 100%;
                  height: 100%;
                  position: relative;
                  overflow: hidden;
                ">
                <div id="tags">
                  <a href="#" v-for="bqy in biaoqianyun">{{ bqy.name }}</a>
                </div>
                <canvas id="myCanvas" style="width: 100%"></canvas>
              </div>
            </div>
          </div>
          <div style="height: 40%; position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0">巡护次数最多Top5</span>
              <br />
              <span class="xwz" style="line-height: 0">Top5 patrol times</span>
            </div>

            <div style="
                position: absolute;
                left: 0;
                height: calc(100% - 0.6rem);
                width: 100%;
              " id="bar3"></div>
          </div>
        </div>
      </div>
    </div>
    <!--右边 E-->
  </div>
</template>

<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";

export default {
  name: "xxjc",
  data() {
    return {
      navList: [
        {
          name: "功能区划",
          type: "gnqh",
          sts: true,
        },
        {
          name: "网格",
          type: "wg",
          sts: false,
        },
      ],
      fbList: [
        {
          name: "干扰分布",
          ico: "/static/images/green.png",
          sts: true,
        },
        {
          name: "动物分布",
          ico: "/static/images/red.png",
          sts: true,
        },
        {
          name: "植物分布",
          ico: "/static/images/yellow.png",
          sts: true,
        },
      ],
      tclist: [
        {
          ico: "/static/images/xh1.png",
          name: "参加工作(人数)",
          num: 0,
          color: "#2EFFF2",
        },
        {
          ico: "/static/images/xh2.png",
          name: "巡护距离(km)",
          num: 0,
          color: "#FFF27F",
        },
        {
          ico: "/static/images/xh3.png",
          name: "巡护次数(次)",
          num: 0,
          color: "#917FFF",
        },
        {
          ico: "/static/images/xh4.png",
          name: "采集数据(条)",
          num: 0,
          color: "#34CEFF",
        },
      ],
      biaoqianyun: [],
      areaId: "",
      year: "",
      dataNum: 0,
      distance: 0,
      patrolNum: 0,
      personNum: 0,
      photoNum: 0,
      videoNum: 0,
      gr: [],
      dw: [],
      zw: [],
      ganrao: [],
      plant: [],
      animal: [],
      maptype: "gnqh",
      bhqName: [],
      MapColor: [
        "rgba(203, 255, 252, 0.8)",
        "rgba(74, 239, 230, 0.8)",
        "rgba(4, 178, 169, 0.8)",
        "rgba(203, 255, 252, 0.8)",
        "rgba(114,8,82,.8)",
        "rgba(174,213,13,.8)",
        "rgba(194,133,112,.8)",
        "rgba(225,66,19,.8)",
        "rgba(94,60,190,.8)",
        "rgba(253,166,199,.8)",
      ],
      value2: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  },
  mounted() {
    let vm = this;
    (async function f() {
      let res = await http.get("/papi/0000085_json/gnqh.json");
      let arr = [];
      res.data.features.forEach((t) => {
        arr.push(t.properties.name);
      });
      vm.bhqName = arr;
      vm.getPatrolView();
    })();
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.year = new Date().getFullYear();
  },
  methods: {
    qhshij(daterange) {
      if (daterange != null) {
        var year = daterange.getFullYear();
        var month = daterange.getMonth() + 1;
        var date = daterange.getDate();
        this.year = year + "-" + month + "-" + date;
      } else {
        this.year = new Date().getFullYear();
      }
      this.getPatrolView()
    },
    //延庆区颜色
    yqColor(n) {
      if (n == "实验区") {
        return "rgba(203, 255, 252, 0.8)";
      }
      if (n == "核心区") {
        return "rgba(4, 178, 169, 0.8)";
      }
      if (n == "缓冲区") {
        return "rgba(74, 239, 230, 0.8)";
      }
    },
    datamap(flag) {
      this.maptype = flag;
      this.navList.forEach((e) => {
        if (flag == e.type) {
          e.sts = true;
        } else {
          e.sts = false;
        }
      });
      if (flag == "gnqh") {
        let url = "/papi/0000085_json/gnqh.json";
        let jsondata = [];
        let e = ["实验区", "缓冲区", "核心区", "延庆区"];
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            // itemStyle: {
            //   show: true,
            //   areaColor: this.MapColor[x],
            //   borderColor: this.MapColor[x],
            //   borderWidth: "1",
            // },

            //延庆版本
            itemStyle: {
              show: true,
              areaColor: this.yqColor(c),
              borderColor: this.yqColor(c),
              borderWidth: "1",
            },
          });
        });
        let geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        this.map(url, geo, this.gr, this.zw, this.dw);
      }
      if (flag == "wg") {
        let geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        let url = "/papi/0000085_json/wangge.json";
        this.map(url, geo, this.gr, this.zw, this.dw);
      }
    },
    getPatrolView() {
      let vm = this;
      (async function f() {
        let res = await http.get(
          api.getTotallPatrolView + vm.areaId + "&startTimeStr=" + vm.year
        );
        vm.dataNum = res.data.dataNum.toFixed(0);
        vm.distance = res.data.distance.toFixed(0);
        vm.patrolNum = res.data.patrolNum.toFixed(0);
        vm.personNum = res.data.personNum.toFixed(0);
        vm.photoNum = res.data.photoNum.toFixed(0);
        vm.videoNum = res.data.videoNum.toFixed(0);
        let x = [],
          y = [];
        for (let key in res.data.top5) {
          x.push(key);
          y.push(res.data.top5[key]);
        }
        vm.drawbar3(x, y);
      })();
      (async function f() {
        let res = await http.get(
          api.getTotallPatrolView + vm.areaId + "&startTimeStr="
        );
        vm.tclist[3].num = res.data.dataNum.toFixed(0);
        vm.tclist[1].num = res.data.distance.toFixed(0);
        vm.tclist[2].num = res.data.patrolNum.toFixed(0);
        vm.tclist[0].num = res.data.personNum.toFixed(0);
      })();
      (async function f() {
        let res = await http.get(
          api.getPlant + vm.areaId + "&startTimeStr=" + vm.year
        );
        let x = [],
          y = [];
        res.data.plantTop.forEach((t) => {
          x.push(t.name);
          y.push(t.number);
        });
        vm.drawbar1(x, y);
      })();
      (async function f() {
        let res = await http.get(
          api.getAnimal + vm.areaId + "&startTimeStr=" + vm.year
        );
        let x = [],
          y = [];
        res.data.animalTop.forEach((t) => {
          x.push(t.name);
          y.push(t.number);
        });
        vm.drawbar2(x, y);
      })();
      (async function f() {
        let res = await http.get(
          api.patrolSpecies + vm.areaId + "&startTimeStr=" + vm.year
        );
        let arr = [];
        res.data.data.forEach((t, x) => {
          if (x < 13) {
            let z = {
              name: t,
            };
            arr.push(z);
          }
        });
        vm.biaoqianyun = arr;
        setTimeout(function () {
          vm.try();
        }, 1000);
      })();
      (async function f() {
        let res = await http.get(
          api.getFenbu + vm.areaId + "&startTimeStr=" + vm.year
        );
        let a = [],
          b = [],
          c = [];
        res.data.ganrao.forEach((e, index) => {
          if (index < 100) {
            let z = { value: [e.lon, e.lat] };
            a.push(z);
          }
        });
        res.data.plant.forEach((e, index) => {
          if (index < 100) {
            let z = { value: [e.lon, e.lat] };
            b.push(z);
          }
        });
        res.data.animal.forEach((e, index) => {
          if (index < 100) {
            let z = { value: [e.lon, e.lat] };
            c.push(z);
          }
        });
        vm.ganrao = a;
        vm.plant = b;
        vm.animal = c;
        vm.gr = a;
        vm.zw = b;
        vm.dw = c;
        vm.datamap("gnqh");
      })();
    },
    try() {
      try {
        TagCanvas.Start("myCanvas", "tags", {
          textColour: "#2EFFF2",
          outlineColour: "rgba(0,0,0,.1)",
          reverse: true,
          depth: 0.5,
          textHeight: 14,
          dragControl: true,
          decel: 0.95,
          maxSpeed: 0.05,
          initial: [0.1, -0.2], // 配置旋转速度
        });
      } catch (e) { }
    },
    map(url, geo, gr, zw, dw) {
      let vm = this;
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(document.getElementById("map"));
      } else {
        myChart.clear();
      }
      $.getJSON(url, function (geoJson) {
        echarts.registerMap("GeoJson", geoJson);
        myChart.showLoading("default", {
          text: "加载中，请稍候...",
          maskColor: "rgba(0,0,0,.3)",
          textColor: "#fff",
        });
        let option = {
          geo: geo,
          series: [
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "image:///static/images/green.png",
              legendHoverLink: true,
              symbolSize: [16, 18],
              data: gr,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "image:///static/images/yellow.png",
              symbolSize: [16, 18],
              data: zw,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "image:///static/images/red.png",
              symbolSize: [16, 18],
              data: dw,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            },
          ],
        };
        myChart.setOption(option, true);
        setTimeout(function () {
          myChart.hideLoading();
          myChart.resize();
        }, 500);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    filteryType(e) {
      if (e == "延庆区") {
        return "rgba(203, 255, 252, 0.8)";
      }
      if (e == "缓冲区") {
        return "rgba(74, 239, 230, 0.8)";
      }
      if (e == "核心区") {
        return "rgba(4, 178, 169, 0.8)";
      }
    },
    qhfb(item) {
      item.sts = !item.sts;
      let url = "",
        geo = {},
        jsondata = [],
        e = ["实验区", "缓冲区", "核心区"];
      if (this.maptype == "gnqh") {
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            itemStyle: {
              show: true,
              areaColor: this.MapColor[x],
              borderColor: this.MapColor[x],
              borderWidth: "1",
            },
          });
        });
        geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        url = "/papi/0000085_json/gnqh.json";
      }
      if (this.maptype == "wg") {
        geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        url = "/papi/0000085_json/wangge.json";
      }
      if (item.sts) {
        if (item.name == "干扰分布") {
          this.gr = this.ganrao;
        }
        if (item.name == "动物分布") {
          this.dw = this.animal;
        }
        if (item.name == "植物分布") {
          this.zw = this.plant;
        }
      } else {
        if (item.name == "干扰分布") {
          this.gr = [];
        }
        if (item.name == "动物分布") {
          this.dw = [];
        }
        if (item.name == "植物分布") {
          this.zw = [];
        }
      }
      this.map(url, geo, this.gr, this.zw, this.dw);
    },
    drawbar1(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar1"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar1"));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            rotate: 30,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "13%",
          left: "10%",
          right: "1%",
          bottom: "22%",
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: false,
            barWidth: 16,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(250, 0, 255, 0)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(255, 232, 29, 0.8)",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawbar2(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar2"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar2"));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "13%",
          left: "10%",
          right: "1%",
          bottom: "15%",
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(0, 41, 255, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(18, 255, 255, 0.8)",
                  },
                ]),
              },
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawbar3(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar3"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar3"));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "13%",
          left: "10%",
          right: "1%",
          bottom: "15%",
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(29, 52, 255, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(60, 255, 103, 0.8)",
                  },
                ]),
              },
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
@import "../../static/css/jbxx.css";
@import "../../static/css/xxjc.css";
</style>
<style>
.el-input__prefix,
.el-input__suffix {
  height: 0;
}

.el-input__inner {
  background-color: transparent;
  color: #fff;
}
</style>